<script setup>
import { ref } from "vue";
import 'vue3-video-play/dist/style.css'
const loading = ref(false);
let recommendedImgs = ref([
  {
    id: 1,
    img_src:
      "https://img8.vilipix.com/picture/pages/regular/2022/04/05/20/34/97455370_p0_master1200.jpg?x-oss-process=image/resize,m_fill,w_184",
    topic: "收藏",
    author: "me",
  },
  {
    id: 2,
    img_src:
      "https://img8.vilipix.com/picture/pages/regular/2022/04/24/19/29/97861662_p0_master1200.jpg?x-oss-process=image/resize,m_fill,w_184",
    topic: "受欢迎",
    author: "me",
  },
  {
    id: 3,
    img_src:
      "https://img8.vilipix.com/picture/pages/regular/2022/04/24/21/07/97871161_p0_master1200.jpg?x-oss-process=image/resize,m_fill,w_184",
    topic: "无题",
    author: "me",
  }
]);
let originalImgs = ref([
  {
    id: 4,
    img_src:
      "https://img8.vilipix.com/picture/pages/regular/2021/03/16/10/00/88435451_p0_master1200.jpg?x-oss-process=image/resize,m_fill,w_450",
    topic: "新しい一日",
    author: "me",
  },
  {
    id: 5,
    img_src:
      "https://img8.vilipix.com/picture/pages/regular/2021/03/15/21/01/88418437_p0_master1200.jpg?x-oss-process=image/resize,m_fill,w_450",
    topic: "まったく……あんなこと、私以",
    author: "me",
  },
  {
    id: 6,
    img_src:
      "https://img8.vilipix.com/picture/pages/regular/2021/03/15/20/00/88433160_p0_master1200.jpg?x-oss-process=image/resize,m_fill,w_450",
    topic: "おまたせ、どこいくの？",
    author: "me",
  },
]);
let newImgs = ref([
  {
    id: 7,
    img_src:
      "https://vilipix.oss-cn-beijing.aliyuncs.com/user/addition/1000334639/1651799437429_20220504140133.png?x-oss-process=image/resize,m_fill,w_450",
    topic: "泡沫",
    author: "me",
  },
  {
    id: 8,
    img_src:
      "https://vilipix.oss-cn-beijing.aliyuncs.com/user/addition/1000298511/1651734811861_-origin-IMG_2297.PNG?x-oss-process=image/resize,m_fill,w_450",
    topic: "一起游泳吧",
    author: "me",
  },
]);
// 标签
let tallysInfo = ref(null)
fetch('https://static-23635d6b-4407-415d-89e0-a3c54158e856.bspapp.com/')
  .then((res) => res.json())
  .then((json) => (tallysInfo.value = json))
// 广告轮播
const adsImgs = ref([
  "https://i0.hdslb.com/bfs/game/546b4542bc72dd074083277172f01a5d8de90cbf.jpg",
  "https://i0.hdslb.com/bfs/game/d24e03843d88abbc2db6e4b64a95e3eeabe020c5.jpg",
  "https://i0.hdslb.com/bfs/game/53bed26f7de4eb7f176822ef95b92e69fd63cd43.jpg",
  "https://i0.hdslb.com/bfs/game/5d532796cb400a6d974cb0d710267df00e76f81c.jpg",
  "https://i0.hdslb.com/bfs/game/b833724350e5f36b70528f44f5a610df45c327a0.jpg",
  "https://i0.hdslb.com/bfs/game/d902a57d8313fdd0d81bf49a819599cfaf2a60fa.jpg"
])
</script>

<template>
  <el-scrollbar>
    <div class="scrollbar-flex-content" v-if="tallysInfo">
      <p class="scrollbar-demo-item" v-for="tally in tallysInfo" :style="{ background: tally['background'] }">
        <router-link to="/">
          <span>{{ tally["designation"] }}</span> | 
          <span>{{ tally["alias"] }}</span>
        </router-link>
      </p>
    </div>
    <div v-else>Loading...</div>
  </el-scrollbar>
  <h2>推荐作品</h2>
  <el-row :gutter="24">
    <el-col :span="4" v-for="recommendedImg in recommendedImgs">
      <el-space direction="vertical">
        <el-skeleton style="width: 184px" :loading="loading" animated :throttle="500">
          <el-card>
            <el-image :src="recommendedImg.img_src" lazy />
            <div style="padding: 14px">
              <span style="max-width: 116px" class="img-topic display-overflow">{{
                  recommendedImg.topic
              }}</span>
              <div class="bottom">
                <el-avatar
                  src="https://woniuimage.oss-cn-hangzhou.aliyuncs.com/woniuimage/user/icon/user-icon-default.png" />
                <router-link :to="'/illust/' + recommendedImg.id">
                  <span class="display-overflow img-user-name">{{ recommendedImg.author }}</span>
                </router-link>
              </div>
            </div>
          </el-card>
        </el-skeleton>
      </el-space>
    </el-col>
  </el-row>
  <!-- 广告start -->
  <h2>游戏专区 - 深空之眼</h2>
  <el-row :gutter="24">
    <el-col :span="16">
      <el-carousel :interval="4000" type="card" indicator-position="none" height="280px">
        <el-carousel-item v-for="(adsImg, index) in adsImgs" :key="index">
          <a href="https://skzy.ys4fun.com/"><img :src="adsImg" referrerPolicy="no-referrer"></a>
        </el-carousel-item>
      </el-carousel>
    </el-col>
    <el-col :span="8">
    <video controls>
  <source src="https://upos-sz-mirrorcos.bilivideo.com/upgcxcode/07/66/587726607/587726607-1-208.mp4?e=ig8euxZM2rNcNbhM7wdVhwdlhzKMhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1652819392&gen=playurlv2&os=cosbv&oi=1866715013&trid=e3145e37989146fab54283a4cffe92daT&platform=html5&upsig=0750c5c2650d20b1ab2d4a48678504b7&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform" type="video/mp4">
</video>
    </el-col>
  </el-row>
  <!-- 广告end -->
  <h2>#原创的插画作品</h2>
  <el-row :gutter="24">
    <el-col :span="4" v-for="originalImg in originalImgs">
      <el-space direction="vertical">
        <el-skeleton style="width: 184px" :loading="loading" animated :throttle="500">
          <el-card>
            <el-image :src="originalImg.img_src" lazy />
            <div style="padding: 14px">
              <span style="max-width: 116px" class="img-topic display-overflow">{{
                  originalImg.topic
              }}</span>
              <div class="bottom">
                <el-avatar
                  src="https://woniuimage.oss-cn-hangzhou.aliyuncs.com/woniuimage/user/icon/user-icon-default.png" />
                <router-link :to="'/illust/' + originalImg.id">
                  <span class="display-overflow img-user-name">{{ originalImg.author }}</span>
                </router-link>
              </div>
            </div>
          </el-card>
        </el-skeleton>
      </el-space>
    </el-col>
  </el-row>
  <h2>#最新的插画作品</h2>
  <el-row :gutter="24">
    <el-col :span="4" v-for="newImg in newImgs">
      <el-space direction="vertical">
        <el-skeleton style="width: 184px" :loading="loading" animated :throttle="500">
          <el-card>
            <el-image :src="newImg.img_src" lazy />
            <div style="padding: 14px">
              <span style="max-width: 116px" class="img-topic display-overflow">{{
                  newImg.topic
              }}</span>
              <div class="bottom">
                <el-avatar
                  src="https://woniuimage.oss-cn-hangzhou.aliyuncs.com/woniuimage/user/icon/user-icon-default.png" />
                <router-link :to="'/illust/' + newImg.id">
                  <span class="display-overflow img-user-name">{{ newImg.author }}</span>
                </router-link>
              </div>
            </div>
          </el-card>
        </el-skeleton>
      </el-space>
    </el-col>
  </el-row>
</template>
<style scoped lang="css">
/* 标签滚动 start*/
.scrollbar-flex-content {
  display: flex;
}

.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 12px 0 12px;
  min-height: 50px;
  margin: 10px;
  text-align: center;
  border: 1px solid green;
  border-radius: 4px;
}

.scrollbar-demo-item a {
  text-decoration: none;
}

/* 标签滚动 end*/
.img-topic {
  display: block;
  font-weight: bold;
  font-size: 14px;
}

/* .img-text-middle{
  vertical-align: middle;
} */
h2 {
  color: rgb(79, 108, 123);
}

.display-overflow {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.img-user-name {
  max-width: 75px;
  color: rgba(0, 0, 0, 0.64);
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
}
</style>